/* 基础样式 */
.container {
    position: relative;
    min-height: 100vh;
    background-color: #fff8fa;
    padding-bottom: 80rpx;
    font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  }
  
  /* 顶部背景 - 更丰富的渐变效果 */
  .header-bg {
    height: 350rpx;
    width: 100%;
    // background: linear-gradient(135deg, #FFB5C5 0%, #FFB5C5 100%);
    border-bottom-left-radius: 60rpx;
    border-bottom-right-radius: 60rpx;
    position: relative;
    overflow: hidden;
    margin-top: -200rpx;
  }
  
  .header-bg::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    transform: rotate(15deg);
  }
  
  /* 头像区域 - 增加装饰元素 */
  .avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -120rpx;
    margin-bottom: 60rpx;
    position: relative;
    z-index: 2;
  }
  
  .avatar-container {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    border: 8rpx solid #fff;
    box-shadow: 0 15rpx 30rpx rgba(255, 143, 171, 0.3);
    background: #fff;
    padding: 4rpx;
  }
  
  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .avatar-edit {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50rpx;
    height: 50rpx;
    background: #FFB5C5;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.1);
    border: 2rpx solid #fff;
  }
  
  .edit-icon {
    width: 35rpx;
    height: 35rpx;
    filter: brightness(0) invert(1);
  }
  
  .edit-avatar-text {
    margin-top: 25rpx;
    font-size: 28rpx;
    color: #FF8FAB;
    font-weight: 500;
    letter-spacing: 1rpx;
  }
  
  /* 表单区域 - 卡片式设计 */
  .form-container {
    background: #fff;
    border-radius: 30rpx;
    margin: 0 30rpx;
    padding: 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(255, 182, 193, 0.15);
    position: relative;
    z-index: 1;
    border: 1rpx solid #ffe6eb;
    width: 600rpx;
  }
  
  .form-item {
    margin-bottom: 40rpx;
    position: relative;
    padding-left: 30rpx;
  }
  
  .form-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10rpx;
    width: 6rpx;
    height: 30rpx;
    background: linear-gradient(to bottom, #FFB5C5, #FF8FAB);
    border-radius: 3rpx;
  }
  
  .form-label {
    display: block;
    font-size: 30rpx;
    color: #666;
    margin-bottom: 20rpx;
    font-weight: 500;
    letter-spacing: 1rpx;
  }
  
  .form-input, .form-textarea {
    width: 500rpx;
    font-size: 32rpx;
    color: #333;
    padding: 20rpx;
    background-color: #fff9fb;
    border-radius: 15rpx;
    border: 1rpx solid #ffd6e0;
    transition: all 0.3s ease;
  }
  
  .form-input:focus, .form-textarea:focus {
    border-color: #FF8FAB;
    box-shadow: 0 0 0 2rpx rgba(255, 143, 171, 0.2);
  }
  
  .form-textarea {
    height: 150rpx;
    line-height: 1.6;
  }
  
  .placeholder {
    color: #d1a7b1;
    font-size: 30rpx;
  }
  
  /* 按钮样式 - 更精致的按钮 */
  .btn-container {
    padding: 0 50rpx;
    margin-top: 60rpx;
  }
  
  .save-btn {
    background: linear-gradient(135deg, #FF8FAB 0%, #FFB5C5 100%);
    color: #fff;
    border-radius: 50rpx;
    font-size: 34rpx;
    height: 90rpx;
    line-height: 60rpx;
    box-shadow: 0 10rpx 20rpx rgba(255, 143, 171, 0.3);
    border: none;
    font-weight: 500;
    letter-spacing: 2rpx;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
  }
  
  .save-btn::after {
    border: none;
  }
  
  .save-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      to bottom right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 45%,
      rgba(255,255,255,0.3) 50%,
      rgba(255,255,255,0) 55%,
      rgba(255,255,255,0) 100%
    );
    transform: rotate(30deg);
    transition: all 0.7s;
  }
  
  /* 按钮点击效果 */
  .save-btn:active {
    transform: scale(0.98);
    box-shadow: 0 5rpx 15rpx rgba(255, 143, 171, 0.4);
  }
  
  .save-btn:active::before {
    left: 100%;
  }
  
  /* 添加一些装饰元素 */
  .decorative-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 182, 193, 0.1);
  }
  
  .circle-1 {
    width: 200rpx;
    height: 200rpx;
    top: -100rpx;
    right: -100rpx;
  }
  
  .circle-2 {
    width: 150rpx;
    height: 150rpx;
    bottom: 50rpx;
    left: -75rpx;
  }
  /* 新增头像背景样式 */
.avatar-bg-container {
    position: relative;
    width: 280rpx;
    height: 280rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -20rpx;
  }
  
  .avatar-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 50%;
    animation: rotate 20s linear infinite;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  /* 调整原有头像区域样式 */
  .avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -300rpx;
    margin-bottom: 60rpx;
    position: relative;
    z-index: 2;
  }
  
  .avatar-container {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    border: 8rpx solid #fff;
    box-shadow: 0 15rpx 30rpx rgba(255, 143, 171, 0.3);
    background: #fff;
    padding: 4rpx;
    z-index: 2;
  }
  
  /* 其他原有样式保持不变... */